<template>
  <div class="tabbar">
    <ul>
      <router-link to="/home" tag="li">
        <img src="../assets/icon/ftmenu1-a.png"  v-if="flag=='home'">
        <img src="../assets/icon/ftmenu1.png" v-else>
        home
      </router-link>
      <router-link to="/class" tag="li" >
        <img src="../assets/icon/ftmenu2-a.png" v-if="flag=='class'">
        <img src="../assets/icon/ftmenu2.png" v-else>
      
      class</router-link>
      <router-link to="/cart" tag="li">
        <img src="../assets/icon/ftmenu3-a.png" v-if="flag=='cart'">
        <img src="../assets/icon/ftmenu3.png" v-else>
      
      cart</router-link>
      <router-link to="/center" tag="li">
        <img src="../assets/icon/ftmenu4-a.png" v-if="flag=='center'">
        <img src="../assets/icon/ftmenu4.png" v-else>
      
      center</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      flag:'home'
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    '$route'(to,from) {
      // console.log(to);
       this.flag = to.name 
    }
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang='less'>
.tabbar {
    width: 100%;
    height: 97px;
    position: fixed;
    bottom: -1px;
    background-color: #ffffff;
    z-index: 999;
  ul {
    overflow: hidden;
    display: inline-block;
    margin: auto;
    padding: 5px;
    width: 100%;
    li {
      width: 25%;
      float: left;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 50%;
      }
    }
  }
}
</style>
